<template>
  <div class="main">

    <el-table
      v-loading="loading"
      :data="orders.filter(data => !search || data.user.username.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      height="630">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form inline class="demo-table-expand" style="margin-left: 50px">
            <el-form-item label="订单ID：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-shopping-bag-2"></i>
                  <span>订单ID:</span>
                </span>
              </span>
              <span>{{ props.row.order.id }}</span>
            </el-form-item>
            <el-form-item label="场次ID：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-date"></i>
                  <span>场次ID:</span>
                </span>
              </span>
              <span>{{ props.row.arrangement.id }}</span>
            </el-form-item>
            <el-form-item label="用户ID：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-user-solid"></i>
                  <span>用户ID:</span>
                </span>
              </span>
              <span>{{ props.row.user.id }}</span>
            </el-form-item>
            <el-form-item label="用户名：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-user"></i>
                  <span>用户名:</span>
                </span>
              </span>
              <span>{{ props.row.user.username }}</span>
            </el-form-item>
            <el-form-item label="电影ID：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-video-camera-solid"></i>
                  <span>电影ID:</span>
                </span>
              </span>
              <span>{{ props.row.film.id }}</span>
            </el-form-item>
            <el-form-item label="电影名：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-video-camera"></i>
                  <span>电影名:</span>
                </span>
              </span>
              <span>《 {{ props.row.film.name }} 》</span>
            </el-form-item>
            <el-form-item label="座位号：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-menu"></i>
                  <span>座位号:</span>
                </span>
              </span>
              <span>{{ props.row.order.seats }}</span>
            </el-form-item>
            <el-form-item label="订单金额：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-shopping-cart-full"></i>
                  <span>订单金额:</span>
                </span>
              </span>
              <span>{{ props.row.order.price }}</span>
            </el-form-item>
            <el-form-item label="下单时间：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-time"></i>
                  <span>下单时间:</span>
                </span>
              </span>
              <span>{{ props.row.order.createTime }}</span>
            </el-form-item>
            <el-form-item label="支付时间：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-time"></i>
                  <span>支付时间:</span>
                </span>
              </span>
              <span>{{ props.row.order.payTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        label="订单 ID"-->
<!--        width="400"-->
<!--        prop="order.id">-->
<!--      </el-table-column>-->
      <el-table-column
        label="订单用户"
        width="180"
        sortable
        prop="user.username">
      </el-table-column>
      <el-table-column
        label="支付时间"
        width="250"
        prop="order.payTime"
        sortable>
      </el-table-column>


      <el-table-column
        width="180"
        label="订单金额"
        prop="order.price">
      </el-table-column>
      <el-table-column label="订单状态" width="150" prop="status" sortable>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.order.status === 0" type="info">等待支付</el-tag>
          <el-tag v-if="scope.row.order.status === 1" type="info">支付失败</el-tag>
          <el-tag v-if="scope.row.order.status === 2" type="success">支付成功</el-tag>
          <el-tag v-if="scope.row.order.status === 3" type="warning">已被撤销</el-tag>
          <el-tag v-if="scope.row.order.status === 4" type="danger">订单异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button @click="handle1(scope.$index, scope.row.order)" size="small" type="warning"
                     icon="el-icon-refresh-right"
                     :disabled="scope.row.order.status === 3"
                     plain>撤销订单
          </el-button>
          <el-button @click="handle2(scope.$index, scope.row.order)" size="small" type="danger"
                     icon="el-icon-circle-close"
                     :disabled="scope.row.order.status === 4 || scope.row.order.status === 3"
                     plain>上报异常
          </el-button>
        </template>
      </el-table-column>
      <el-table-column width="200" align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入用户名进行搜索"/>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="上报异常表单" :visible.sync="dialogFormVisible" @close="handleClose" :destroy-on-close="true">
      <el-form ref="form" :model="form" style="width: 400px" :rules="rules">
        <el-form-item style="width: 100%" label="上报人" label-width="120px">
          <el-input v-model="this.username" autocomplete="off" type="text" disabled></el-input>
        </el-form-item>
        <el-form-item style="width: 100%" label="上报原因" label-width="120px" prop="reason">
          <el-input v-model="form.reason" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {CreateOrderException, FindAllOrder, UpdateOrder} from "@/api/order";
  import config from "@/config";

  export default {

    data() {
      return {
        rules: {
          reason: [
            { required: true, message: '请填写上报原因！', trigger: 'blur' }
          ],
          reviewer: [
            { required: true, message: '请填写上报人！', trigger: 'blur' }
          ],

        },
        loading: false,
        dialogFormVisible: false,
        orders: [],
        form: {
          oid: '',
          reason: '',
          reviewer: '',
        },
        search: '',
        username: localStorage.getItem("username"),
        total: 0,
        params: {
          page: 1,
          limit: 10,
        },
      }
    },

    mounted() {
      this.loadOrderList()
    },

    methods: {

      loadOrderList() {
        this.loading = true
        FindAllOrder().then(res => {
          if (res.success) {
            setTimeout(() => {
              this.orders = res.data
              this.loading = false
            }, 0)
          }
        })
      },

      handle1(index, order) {
        this.orders[index].order.status = 3
        UpdateOrder(this.orders[index].order).then(res => {
          console.log(res)
          this.loadOrderList();
          this.$message({
            type: 'success',
            message: '订单撤销成功!'
          });
        })
      },

      handle2(index, order) {
        this.form.oid = order.id
        this.dialogFormVisible = true
      },

      submit() {
        this.form.reviewer = this.username
        this.$refs.form.validate((valid) => {
          if (valid) {
            CreateOrderException(this.form).then(res => {
              if (res.success) {
                this.loadOrderList()
                this.$message({
                  type: 'success',
                  message: '订单异常上报成功!'
                });
                this.dialogFormVisible = false
              }
            })
          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        });

      },

      handleClose(){
        this.$refs.form.resetFields();
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.limit = val;
        this.listOrderByPage();
      },

      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.page = val;
        this.listOrderByPage();
      },

      listOrderByPage:function(){
        this.$axios({
          method: 'get',
          url: config.API_URL + "/order/page?page=" + this.params.page + "&limit=" + this.params.limit,
          headers: {
            "Authorization": localStorage.getItem("token")
          },
        })
          .then((res) => {
            console.log(res.data);
            this.orders = res.data.data.list;
            this.total = res.data.data.total;
          });
      },

    }

  }
</script>

<style scoped>
  .main {
    height: 500px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
